<template>
    <div>
        <!-- 卡片一：扫二维码 -->
        <div class="card bg-light mt-3">
            <div class="card-body d-flex">
                <img src="../../assets/images/CSDN.png" width="120px" alt="">
                <div class="ms-5">
                    <p>&bull; 技术干货分享</p>
                    <p>&bull; 免费资料领取</p>
                    <p class="fw-bolder">&bull; 扫码领取更多惊喜</p>
                </div>
            </div>
        </div>

        <!-- 卡片二：联系方式 -->
        <div class="card bg-light mt-3">
            <div class="card-body">
                <h5>社交</h5>
                <hr />
                <p>QQ: 876767656</p>
                <p>邮箱: bilibili@qq.com</p>
            </div>
        </div>

        <!-- 广告图 -->
        <img class="mt-3" src="../../assets/images/g1.gif" alt="" style="height: 130px; width: 100%;">

        <!-- 卡片三：文章分类 -->
        <div class="card bg-light mt-3">
            <div class="card-body">
                <h5>分类</h5>
                <hr />

                <p v-for="cc in type">
                    <a :href="'index.html?typeId='+cc.id" class="card-link text-decoration-none text-primary">
                        {{cc.typeName}} <span style="color: gray">({{ cc.count }})</span>
                    </a>
                </p>
            </div>
        </div>

        <!-- 卡片四：归档 -->
        <div class="card bg-light mt-3">
            <div class="card-body">
                <h5>归档</h5>
                <hr />
                <p  v-for="mm in archiveDate" >
                    <a href="blog-archives.html" class="card-link text-decoration-none text-primary">
                        {{mm.year}}年{{mm.month}}月 <span style="color: gray">({{mm.num}})</span>
                    </a>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
module.exports = {
    data() {
        return {
          archiveDate:[],
          type:{
            count:null,
            typeName:null
          }
        };
    },
  methods: {
    extractQueryParams(url) {
      const urlObj = new URL(url);
      const params = {};
      urlObj.searchParams.forEach((value, key) => {
        params[key] = value;
      });
      return params;
    },
    getArchive(){
      this.$http.get("/article/getByYearAndMonth").then(res=>{
        console.log(res.data.data)
        this.archiveDate = res.data.data
      })
    },
    getTypeName(){
      // alert(11111)
      var data = {
        count:this.count,
        typeName:this.typeName
      }
      this.$http.post("/article/getByType",data).then(res=>{
        this.type = res.data.data
        // console.log(this.type)
      })
    }
  },
  mounted() {
    var url =  window.location.href
    console.log(url)
    var urlId = this.extractQueryParams(url)
    this.getArchive()
    this.getTypeName()
  }
}
</script>

<style></style>